<template>
	<view>
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="Hello Pro"></u-loading-page>
		<view v-if="!loadding && orderData.id" class="main">
			<view v-if="orderData.pay_state == 1" class="top_tag">
				<u-icon size="18" name="clock"></u-icon>
				<text v-if="orderData.user_id != userinfo.id">等待发货</text>
				<text v-else>等待收货</text>
			</view>
			<view v-else-if="orderData.pay_state == 2" class="top_tag">
				<u-icon size="18" name="clock"></u-icon>
				<text>已完成</text>
			</view>
			<view class="product">
				<view class="item" v-for="(item, index) in orderData.proData" :key="index">
					<view class="item-title">
						<u--text v-if="orderData.user_id != userinfo.id" bold prefixIcon="bag" iconStyle="font-size: 19px"
							:text="item.mobile"></u--text>
						<u--text v-else prefixIcon="bag" bold iconStyle="font-size: 19px"
							:text="item.product_name"></u--text>
					</view>
					<u-line></u-line>
					<view class="pro-con">
						<view class="left">
							<image :src="item.image"></image>
						</view>
						<view class="right">
							<view class="infos">
								<view class="pro_title">
									{{item.product_name}}
								</view>
								<view class="pro_number">
									<text class="">x{{item.number}}</text>
								</view>
								<view class="pro_money">
									<text class="pro_money_box">{{item.single_price}}</text>
								</view>
							</view>
							<view v-if="orderData.user_id != userinfo.id" class="operate">
								<view v-if="item.status == 2" class="completed">
									<text>已完成</text>
									<br>
									<text class="grays" @click="lookSnFun(item)">查看终端信息</text>
								</view>
								<view v-else class="btns" @click="shipments(item)">
									发货
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="total">
				<view class="items">
					<text class="labels">合计</text>
					<text class="values">{{orderData.price}}</text>
				</view>
				<u-line dashed></u-line>
				<view class="items">
					<text class="labels">数量</text>
					<text class="values">{{orderData.total_num}}</text>
				</view>
				<u-line dashed></u-line>
				<view class="items">
					<view class=""><text>实际支付</text></view>
					<view class="paymoney">
						<text
							class="values">{{orderData.pay_type == 3 ? orderData.total_num : orderData.pay_price}}</text>
					</view>
				</view>
			</view>
			<view class="order">
				<view class="items">
					<text class="labels" style="font-weight: bold;">订单信息</text>
					<text class="values"></text>
				</view>
				<u-line></u-line>
				<view class="items">
					<text class="labels">订单编号</text>
					<view class="orderno">
						<text class="orderno-v">{{orderData.order_num}}</text> | <text class="copy"
							@click.stop="copy(orderData.order_num)">复制</text>
					</view>
				</view>
				<u-line dashed></u-line>
				<view class="items">
					<text class="labels">支付方式</text>
					<text v-if="orderData.pay_type == 1" class="values">余额</text>
					<text v-else-if="orderData.pay_type == 2" class="values">微信</text>
					<text v-else-if="orderData.pay_type == 3" class="values">认购量</text>
				</view>
				<view class="items">
					<text class="labels">下单时间</text>
					<view class="orderno">
						{{orderData.create_time_txt}}
					</view>
				</view>
				<view v-if="orderData.pay_state == 2" class="items">
					<text class="labels">{{type==1?'收货时间':'发货时间'}}</text>
					<view class="orderno">
						{{orderData.finish_time_txt}}
					</view>
				</view>
			</view>
			<u-popup :show="show" mode="center" @close="show = false">
				<view class="snList">
					<view class="titles">
						终端信息
					</view>
					<u-line></u-line>
					<view v-for="(item, index) in snList" :key="index" class="items">
						<view class="lefts">
							{{item}}
						</view>
						<view class="rights">
							<u-icon name="file-text" @click="copy(item)"></u-icon>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	/*#ifdef H5*/
	var wx = require('@/util/jweixin-module.js');
	/*#endif*/
	export default {
		data() {
			return {
				orderData: {},
				loadding: true,
				show: false,
				userinfo: {},
				order_id: null,
				balance: 0,
				snList: [],
				type: 1
			}
		},
		onLoad(e) {
			this.type = e.type
			this.userinfo = uni.getStorageSync('userinfo');
			if (e.id && e.id > 0) {
				this.order_id = e.id
			}
			this.loadData()
		},
		onShow() {
			this.loadData()
		},
		methods: {
			// 复制
			copy(orderno) {
				uni.setClipboardData({
					data: orderno,
					success: function() {}
				});
			},
			// 获取订单信息
			async loadData() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Order/getOrderDetail',
					data: {
						order_id: this.order_id
					},
					header: {
						'token': this.userinfo.token
					}
				});
				this.loadding = false
				if (res.code == 1) {
					this.orderData = res.data
				}
			},
			// 发货
			shipments(item) {
				uni.navigateTo({
					url: '/pages/version5/index/shop/order/shipments?id=' + item.id + '&pid=' + item.product_id +
						'&nums=' + item.number
				})
			},
			// 查看发货信息
			async lookSnFun(item) {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'order/getOrderSn',
					data: {
						order_product_id: item.id
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				if (res.code == 1) {
					this.snList = res.data
					this.show = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}

	.main {
		padding-bottom: 100rpx;

		.top_tag {
			padding: 20rpx;
			display: flex;
			justify-content: center;
			font-size: 36rpx;
			font-weight: bold;

			text {
				padding-left: 10rpx;
			}
		}

		.product {
			.item {
				margin: 0 20rpx 20rpx 20rpx;
				padding: 0 20rpx;
				background-color: #ffffff;
				border-radius: 20rpx;

				.item-title {
					width: 100%;
					display: block;
					font-size: 26rpx;
					padding: 20rpx 0;
				}

				.pro-con {
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					display: flex;
					justify-content: space-between;

					.left {
						width: 26%;

						image {
							border-radius: 10rpx;
							width: 160rpx;
							height: 160rpx;
						}
					}

					.right {
						width: 70%;
						display: flex;
						justify-content: space-between;

						.infos {
							.pro_title {
								padding-top: 10rpx;
								font-size: 28rpx;
								font-weight: bold;
							}

							.pro_number {
								font-size: 28rpx;
								padding-top: 10rpx;
							}

							.pro_money {
								padding-top: 10rpx;
								font-size: 26rpx;

								.pro_money_box {
									font-weight: bold;
									color: #fa3534;
								}
							}

							.total_money {
								color: #fa3534;
								font-weight: bold;
							}
						}

						.operate {
							padding-top: 50rpx;

							.btns {
								background-color: #2979ff;
								color: #ffffff;
								padding: 10rpx 30rpx;
								border-radius: 16rpx;
								font-size: 26rpx;
							}

							.completed {
								font-size: 26rpx;
								font-weight: bold;
								color: #19be6b;
								text-align: center;
								.grays {
									color: #909399;
								}
							}
						}
					}
				}
			}
		}

		.total {
			font-size: 28rpx;
			padding: 10rpx 20rpx;
			background-color: #ffffff;
			margin: 0 20rpx 20rpx 20rpx;
			border-radius: 20rpx;

			.items {
				padding: 16rpx 0;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;

				.labels {
					width: 30%;
				}

				.paymoney {
					font-weight: bold;
					display: flex;
					justify-content: space-between;
				}
			}
		}

		.order {
			font-size: 28rpx;
			padding: 10rpx 20rpx;
			background-color: #ffffff;
			margin: 0 20rpx 20rpx 20rpx;
			border-radius: 20rpx;

			.items {
				padding: 16rpx 0;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;

				.orderno {
					font-size: 24rpx;

					.orderno-v {
						padding-right: 10rpx;
					}

					.copy {
						padding-left: 10rpx;
					}
				}
			}
		}

		.cancel {
			font-size: 28rpx;
			padding: 20rpx;
			background-color: #ffffff;
			margin: 0 20rpx 20rpx 20rpx;
			border-radius: 20rpx;
			text-align: center;
			color: #909399;
		}

		.pay_con {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ffffff;
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;

			.pay_money {
				color: #fa3534;
				font-size: 34rpx;
				line-height: 60rpx;
				font-weight: bold;
			}

			.payBtn {
				padding: 10rpx 30rpx;
				background-color: #fa3534;
				border-radius: 50rpx;
				color: #ffffff;
				font-size: 30rpx;
			}
		}

		.snList {
			display: block;
			width: 500rpx;
			height: 600rpx;
			padding: 20rpx;
			border-radius: 12rpx;
			overflow: auto;
			.titles {
				padding-bottom: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.items {
				padding: 20rpx 10rpx;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
			}
		}
	}
</style>